<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/js/amg.js">
</head>
<body style="background-image: url('static/image/g2.png')">
<div class="header" >
    <h1>在线点餐系统</h1>
</div>

<div class="topnav" >

    <div class="div1" style="width: 50%">
        <div id="USER">
            <div   th:if="${session.USER}" th:object="${session.USER}" >
                <span style="color: black">用户名：<span id="Uname" th:text="*{uname}"></span><br></span>
                <span style="color: palevioletred">账户： <span id="account" th:text="*{account}"></span>元</span>
                <button id="add" class="button5">充值</button>
            </div>
        </div>

        <div th:if="${session.USER}">
            <button id="toshop">
                成为商家
            </button>
            <form>
                <button type="button"  id="logoutBtn">退出登录</button>
            </form>
        </div>
   </div>

    <div th:if="${session.USER}" id="content" class="div2" style="width: 50%">
        <div id="searchInput">
            <input type="text" id="shopName" placeholder="按商店名搜索">
            <button id="search">搜索</button>
        </div>
        <table id="show" width="600px" style="border: solid; border-spacing: 0;border-collapse: collapse;"></table>
        <table id="NoPayBill" width="600px" style="border: solid; border-spacing: 0;border-collapse: collapse;position: relative;top: -200px;left:600px; "></table>
        <table id="payBill" width="600px" style="border: solid; border-spacing: 0;border-collapse: collapse;position:relative;top: -50px;left:600px;"></table>

    </div>


    <div >
        <div th:if="!${session.USER}">
           <h2> <a href="login.html">亲爱的用户，请登录点餐</a> </h2>
            <h2> <a href="submit.html">免费注册，成为会员 <span style="color: yellow">VIP</span></a> </h2>
            <!--<h3>今日特惠！！！</h3>-->
        </div>
    </div>



</div>

<div th:if="!${session.USER}">

        <div class="carousel_map" style="display: table-cell;vertical-align: middle;text-align:center;">
    <div class="slide">
        <!--小圆点-->
        <input type="radio" name="pic" id="pic1" checked/>
        <input type="radio" name="pic" id="pic2"/>
        <input type="radio" name="pic" id="pic3"/>
        <input type="radio" name="pic" id="pic4"/>

        <div class="labels">
            <label for="pic1"></label>
            <label for="pic2"></label>
            <label for="pic3"></label>
            <label for="pic4"></label>
        </div>

        <!--需要轮播的图片-->
        <ul class="list">
            <li class="item">
                <a href="###">
                    <img src="static/image/1.webp" style="height: 100%; width: 100%;"/>
                </a>
            </li>
            <li class="item">
                <a href="###">
                    <img src="static/image/2.webp" style="height: 100%; width: 100%;"/>
                </a>
            </li>
            <li class="item">
                <a href="###">
                    <img src="static/image/3.webp" style="height: 100%; width: 100%;"/>
                </a>
            </li>
            <li class="item">
                <a href="###">
                    <img src="static/image/food-1.webp" style="height: 100%; width: 100%;"/>
                </a>
            </li>
            <li class="item">
                <a href="###">
                    <img src="static/image/food-2.webp" style="height: 100%; width: 100%;"/>
                </a>
            </li>
        </ul>
    </div>
</div>

</div>



<br><br>
<!--图片播放-->
<!--<div class="rotation">
    <img src="picture" src="image/1.webp" width="50%" >
</div>-->



<h3 th:if="!${session.USER}" style="text-align: center">今日特惠！！！</h3>
<br><br><br>


<div th:if="!${session.USER}" style="width: auto;height:500px">

<div class="responsive">
    <div class="img">
        <a target="_blank" href="login.html">
            <img src="static/image/food-1.webp" alt="图片文本描述" width="600" height="400">
        </a>
        <div class="desc">黑松露牛排 88￥</div>
    </div>
</div>

<div class="responsive">
    <div class="img">
        <a target="_blank" href="login.html">
            <img src="static/image/food-2.webp" alt="图片文本描述" width="600" height="400">
        </a>
        <div class="desc">炙烤鱼翅 20￥</div>
    </div>
</div>

<div class="responsive">
    <div class="img">
        <a target="_blank" href="login.html">
            <img src="static/image/food-3.webp" alt="图片文本描述" width="600" height="400">
        </a>
        <div class="desc">锅烧乌冬 55%</div>
    </div>
</div>
    <div class="responsive">
        <div class="img">
            <a target="_blank" href="login.html">
                <img src="static/image/food-4.png" alt="图片文本描述" width="600" height="400">
            </a>
            <div class="desc">蜜制烤全猪 89￥</div>
        </div>
    </div>

    <!--<div class="responsive">
        <div class="img">
            <a target="_blank" href="login.html">
                <img src="static/image/food-5.png" alt="图片文本描述" width="600" height="400">
            </a>
            <div class="desc">玉米红烧肉 39￥</div>
        </div>
    </div>-->

    <div class="responsive">
        <div class="img">
            <a target="_blank" href="login.html">
                <img src="static/image/food-6.png" alt="图片文本描述" width="600" height="400">
            </a>
            <div class="desc">精品鸭腿饭 15￥</div>
        </div>
    </div>
    <!--<div class="responsive">
        <div class="img">
            <a target="_blank" href="login.html">
                <img src="static/image/food-7.png" alt="图片文本描述" width="600" height="400">
            </a>
            <div class="desc">菜品描述菜品描述菜品描述菜品描述菜品描述</div>
        </div>
    </div>-->
</div>

<br>



<!------------------------------------------------->








<script src="/static/js/index.js" type="text/javascript"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>
<!--<script>
    let index =1;
    function changeImg(){
        index++;
        if (index>3){
            index=1;
        }
        const dd=document.getElementById('picture')
        dd.src="img/" + index +".webp"
    }
    setInterval(changeImg,2000)
</script>-->
</html>